@import url(http://fonts.googleapis.com/css?family=Raleway:400,300);
/* Normal styles for the modal */

#modal {    
    z-index: 999999;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    visibility: hidden;
    width: 100%;
    height: auto;
    padding-left: 10%;
    padding-right: 10%;
    transition: all .5s ease-in-out .2s;
}
/* Make the modal appear when targeted */
#modal:target {
    opacity: 1;   
    top: 30%;
    visibility: visible;
    padding-left: 10%;
    padding-right: 10%;
    position: absolute;
}

#modal2 {    
    z-index: 999999;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    visibility: hidden;
    width: 100%;
    height: auto;
    padding-left: 10%;
    padding-right: 10%;
    transition: all .5s ease-in-out .2s;
}
/* Make the modal appear when targeted */
#modal2:target {
    opacity: 1;   
    top: 30%;
    visibility: visible;
    padding-left: 10%;
    padding-right: 10%;
    position: absolute;
}

#modal3 {    
    z-index: 999999;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    visibility: hidden;
    width: 100%;
    height: auto;
    padding-left: 10%;
    padding-right: 10%;
    transition: all .5s ease-in-out .2s;
}
/* Make the modal appear when targeted */
#modal3:target {
    opacity: 1;   
    top: 30%;
    visibility: visible;
    padding-left: 10%;
    padding-right: 10%;
    position: absolute;
}

#modal4 {    
    z-index: 999999;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    visibility: hidden;
    width: 100%;
    height: auto;
    padding-left: 10%;
    padding-right: 10%;
    transition: all .5s ease-in-out .2s;
}
/* Make the modal appear when targeted */
#modal4:target {
    opacity: 1;   
    top: 30%;
    visibility: visible;
    padding-left: 10%;
    padding-right: 10%;
    position: absolute;
}

#modal5 {    
    z-index: 999999;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    visibility: hidden;
    width: 100%;
    height: auto;
    padding-left: 10%;
    padding-right: 10%;
    transition: all .5s ease-in-out .2s;
}
/* Make the modal appear when targeted */
#modal5:target {
    opacity: 1;   
    top: 30%;
    visibility: visible;
    padding-left: 10%;
    padding-right: 10%;
    position: absolute;
}

#modal6 {    
    z-index: 999999;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    visibility: hidden;
    width: 100%;
    height: auto;
    padding-left: 10%;
    padding-right: 10%;
    transition: all .5s ease-in-out .2s;
}
/* Make the modal appear when targeted */
#modal6:target {
    opacity: 1;   
    top: 30%;
    visibility: visible;
    padding-left: 10%;
    padding-right: 10%;
    position: absolute;
}

.modal-content{
    width: 100%;
    height: 100%;
    padding: 20px;
}

.modal-body p{
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    font-size: 14pt;
}

@media screen and (max-width: 768px){
    #modal:target{
        padding-left: 0;
        padding-right: 0;
    }
}